<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析大屏</title>
    <script src="{{ url_for('static', path='js/echarts.min.js') }}"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
        }
        .chart-container {
            width: 100%;
            height: 400px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>医院销售数据分析大屏</h1>

    <div class="chart-container" id="sales-trend-chart"></div>
    <div class="chart-container" id="product-composition-chart"></div>
    <div class="chart-container" id="sales-amount-trend-chart"></div>
    <div class="chart-container" id="sales-distribution-chart"></div>

    <script>
        // 销售数量趋势图
        const salesData = {{ data.sales_summary | tojson | safe }};
        const salesDates = salesData.map(item => item.购药日期);
        const salesCounts = salesData.map(item => item.销售数量);

        const salesTrendChart = echarts.init(document.getElementById('sales-trend-chart'));
        salesTrendChart.setOption({
            title: { text: '销售数量趋势' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: salesDates },
            yAxis: { type: 'value' },
            series: [{
                name: '销售数量',
                type: 'line',
                data: salesCounts,
                itemStyle: { color: '#4CAF50' }
            }]
        });

        // 销售构成图
        const productData = {{ data.product_summary | tojson | safe }};
        const productNames = productData.map(item => item.商品名称);
        const productCounts = productData.map(item => item.销售数量);

        const productCompositionChart = echarts.init(document.getElementById('product-composition-chart'));
        productCompositionChart.setOption({
            title: { text: '销售构成' },
            tooltip: {},
            legend: { data: ['销售数量'] },
            xAxis: {
                type: 'category',
                data: productNames,
                axisLabel: { rotate: 45 }
            },
            yAxis: { type: 'value' },
            series: [{
                name: '销售数量',
                type: 'bar',
                data: productCounts,
                itemStyle: { color: '#2196F3' }
            }]
        });

        // 销售金额趋势图
        const salesAmountData = {{ data.sales_amount_summary |tojson | safe }};
        const salesAmountCounts = salesAmountData.map(item => item.应收金额);

        const salesAmountTrendChart = echarts.init(document.getElementById('sales-amount-trend-chart'));
        salesAmountTrendChart.setOption({
            title: { text: '销售金额趋势' },
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: salesDates },
            yAxis: { type: 'value' },
            series: [{
                name: '应收金额',
                type: 'line',
                data: salesAmountCounts,
                itemStyle: { color: '#FF9800' }
            }]
        });

        // 销售数量分布图
        const weekData = {{ data.week_summary |tojson|safe }};
        const weekNames = weekData.map(item => item.星期);
        const weekCounts = weekData.map(item => item.销售数量);

        const salesDistributionChart = echarts.init(document.getElementById('sales-distribution-chart'));
        salesDistributionChart.setOption({
            title: { text: '销售数量分布' },
            tooltip: {},
            legend: { data: ['销售数量'] },
            xAxis: { type: 'category', data: weekNames },
            yAxis: { type: 'value' },
            series: [{
                name: '销售数量',
                type: 'bar',
                data: weekCounts,
                itemStyle: { color: '#9C27B0' }
            }]
        });
    </script>
</body>
</html>
